<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-31 11:35:22
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-31 16:40:01
 * @FilePath: \ProtocolTool\src\renderer\src\views\OneClick\components\Config.vue
-->
<script lang="ts" setup>
import useTestStore from '@/store/modules/oneClick'
import { getTestConfigAPI, updateTestConfigAPI } from '@/api/OneClick'
import { MenuOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import Draggable from 'vuedraggable'

import 'simplebar-vue/dist/simplebar.min.css'

const testStore = useTestStore()
const isShow = ref(false)

const draggableRef = ref()

const SocketList = ref<any>([])
const SocketTestList = ref<any>([])
const initList = () => {
  // Socket测试列表
  for (let i = 21; i < 34; i++) {
    if (i === 29) continue
    const item = {
      key: String(testStore.testItemList[i].id),
      title: testStore.testItemList[i].label,
      description: testStore.testItemList[i].desc
    }
    SocketList.value.push(item)
  }
}
initList()
const formRef = ref()
const form = ref<any>({
  one_key_real_test_open: '是',
  response_time_out: 5,
  socket_one_key_test_run_seq_code: ''
})
const rules = {
  one_key_real_test_open: {
    required: true
  },
  response_time_out: {
    required: true
  }
}

const getTestConfig = () => {
  getTestConfigAPI().then((res: any) => {
    const arr = res.data
    form.value.one_key_real_test_open = arr.find(
      (item: any) => item.name === 'one_key_real_test_open'
    ).content
    form.value.response_time_out = arr.find(
      (item: any) => item.name === 'response_time_out'
    ).content

    form.value.socket_one_key_test_run_seq_code = arr.find(
      (item: any) => item.name === 'socket_one_key_test_run_seq_code'
    ).content

    SocketTestList.value = form.value.socket_one_key_test_run_seq_code
      ? form.value.socket_one_key_test_run_seq_code.split(',')
      : []
  })
}

const open = () => {
  getTestConfig()
  isShow.value = true
}
//拖拽逻辑

const loading = ref(false)
const handleOk = () => {
  // debugger
  const selectedList = draggableRef.value.realList
  console.log(selectedList.length)
  if (selectedList.length === 0) {
    message.error('测试项不能为空')
    return
  }
  formRef.value.validate().then(() => {
    loading.value = true
    form.value.socket_one_key_test_run_seq_code = selectedList.map((item) => item.key).join(',')
    const arr: any = []
    arr.push({
      name: 'one_key_real_test_open',
      content: form.value.one_key_real_test_open
    })
    arr.push({
      name: 'response_time_out',
      content: form.value.response_time_out
    })

    arr.push({
      name: 'socket_one_key_test_run_seq_code',
      content: form.value.socket_one_key_test_run_seq_code
    })
    updateTestConfigAPI(arr)
      .then(() => {
        message.success('保存成功')
        isShow.value = false
      })
      .finally(() => {
        loading.value = false
      })
  })
}

defineExpose({
  open
})
</script>

<template>
  <a-modal
    v-model:open="isShow"
    title="测试配置"
    centered
    :width="600"
    :confirm-loading="loading"
    ok-text="保存"
    @ok="handleOk"
  >
    <div class="form mt-10">
      <a-form ref="formRef" :model="form" :rules layout="inline">
        <a-form-item label="自定义Socket"> </a-form-item>
        <div style="width: 100%; display: flex; justify-content: space-between">
          <a-form-item label="响应超时时间（秒）" name="response_time_out">
            <a-input-number v-model:value="form.response_time_out" :min="1" :max="60" />
          </a-form-item>
        </div>
        <!-- 穿梭框和拖拽------------------>
        <div class="data mt-10">
          <a-form-item label="Socket测试顺序" required> </a-form-item>
          <a-form-item>
            <a-transfer
              v-model:target-keys="SocketTestList"
              :data-source="SocketList"
              :list-style="{
                width: '256px',
                height: '300px'
              }"
              :render="(item) => item.title"
              class="custom-transfer"
            >
              <template #children="{ direction, filteredItems, selectedKeys, onItemSelect }">
                <Draggable
                  v-if="direction === 'right'"
                  :list="filteredItems"
                  item-key="id"
                  ghost-class="ghost"
                  chosen-class="chosenClass"
                  animation="300"
                  ref="draggableRef"
                >
                  <template #item="{ element }">
                    <div class="item">
                      <a-checkbox
                        :checked="selectedKeys.includes(element.key)"
                        @change="
                          () => onItemSelect(element.key, !selectedKeys.includes(element.key))
                        "
                      >
                        <span>{{ element.title }}</span>
                      </a-checkbox>
                      <MenuOutlined :style="{ color: '#999999' }" class="config__drag-icon" />
                    </div>
                  </template>
                </Draggable>
              </template>
            </a-transfer>
          </a-form-item>
          <a-form-item> </a-form-item>
        </div>
      </a-form>
    </div>
  </a-modal>
</template>

<style lang="less" scoped>
:deep(::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
:deep(::-webkit-scrollbar-track) {
  border-radius: 10px;
}

/*定义滑块 内阴影+圆角*/
:deep(::-webkit-scrollbar-thumb) {
  border-radius: 10px;
  background-color: #ddd;
}
.ant-form-item .ant-form-item-label > label {
  width: 160px;
}

//拖拽样式
.item {
  border: solid 1px transparent;
  padding: 5px 12px;
  text-align: left;
  display: flex;
  justify-content: space-between;
}

.item:hover {
  cursor: move;
}

.chosenClass {
  background-color: #eee;
  opacity: 1;
  border: solid 1px #13993750;
}

.fallbackClass {
  background-color: aquamarine;
}
.ant-btn-primary {
  background-color: rgb(0, 185, 107);
}
.ant-btn-default {
  background-color: rgb(0, 185, 107);
  border-color: rgb(0, 185, 107);
  box-shadow: 0 2px 0 rgba(0, 185, 107);
}
.ant-btn-primary:not(:disabled):hover {
  color: #fff;
  background-color: #139937;
}
.ant-btn-default:not(:disabled):hover {
  color: #1a8c35;
  border-color: #139937;
}
.ant-btn:not(.ant-dropdown-trigger) {
  color: #fff;
  background-color: #139937;
}
.config__title-container {
  display: flex;
  justify-content: space-between;
}
.config__drag-icon {
  cursor: move;
}
// .transform__style {
//   overflow-y: auto;
// }
:deep(.ant-transfer-list-body) {
  overflow: auto;
}
</style>
